<template>
    <div>
        <div class="modal-content">
            <button type="button" class="close-modal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <div class="modal-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#signin-form" aria-controls="signin-form" role="tab" data-toggle="tab">登录</a>
                    </li>
                    <li role="presentation">
                        <a href="#signup-form" aria-controls="signup-form" role="tab" data-toggle="tab">注册</a>
                    </li>
                </ul>
                        <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="signin-form">
                        <form>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-envelope" style="margin:0;"></i>
                                    </div>
                                    <input type="email" v-model="loginuser" class="form-control" placeholder="请输入邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-lock" style="margin:0;"></i>
                                    </div>
                                    <input type="password" v-model="loginpasswd" class="form-control" placeholder="请输入密码">
                                </div>
                            </div>
                            <div class="form-inline verify-code-item" style="display:none;">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="请输入验证码">
                                    </div>
                                </div>
                                <!-- <img class="verify-code" src="" source="https://www.shiyanlou.com/captcha.gif"> -->
                                
                            </div>

                                <div class="help-block text-left">{{login_message}}</div>

                            <div class="form-group remember-login">
                                <input name="remember" type="checkbox" value="y"> 下次自动登录
                                <a class="pull-right" href="reset_password/index.html">忘记密码？</a>
                            </div>
                            <div class="form-group">
                                <input class="btn btn-primary" @click="login" type="button" value="进入实验楼">
                            </div>
                            <div class="form-group widget-signin">
                                <span>快速登录</span>
                                <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                                <a href="https://api.weibo.com/oauth2/authorize?client_id=4121380497&redirect_uri=http://127.0.0.1:8080/jb"><i class="fa fa-weibo"></i></a>
                                <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                                <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                                <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
                            </div>
                            <div class="form-group error-msg">
                                <div class="alert alert-danger" role="alert"></div>
                            </div>
                        </form>
                    </div>


                    <div role="tabpanel" class="tab-pane" id="signup-form">
                        <form>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-envelope" style="margin:0;"></i>
                                    </div>
                                    <input type="email" v-model="username" class="form-control" placeholder="请输入邮箱">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <i class="fa fa-lock" style="margin:0;"></i>
                                    </div>
                                    <input type="password" v-model="password" class="form-control" placeholder="请输入密码">
                                </div>
                            </div>
                            <div class="form-inline">
                                <div class="form-group">
                                    <div class="input-group">
                                        <input type="text"  v-model='code' class="form-control" placeholder="请输入验证码">
                                    </div>
                                </div>
                                <input class="btn verify-code"  type="button" @click="send_verify_email" :value="mes">
                                <!-- 提示 -->
                                <div class="help-block text-left">{{message}}</div>
                            </div>
                            <div class="form-group">
                                <input class="btn btn-primary" @click="register()"  type="button" value="注册">
                            </div>
                            <div class="form-group agree-privacy">
                                注册表示您已经同意我们的<a href="privacy/index.html" target="_blank">隐私条款</a>
                            </div>
                            <div class="form-group widget-signup">
                                <span>快速注册</span>
                                <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                                <a href="https://api.weibo.com/oauth2/authorize?client_id=4121380497&redirect_uri=http://127.0.0.1:8080/jb"><i class="fa fa-weibo"></i></a>
                                <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                                <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                                <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
                            </div>
                            <!-- <div class="form-group error-msg">
                                <div class="alert alert-danger" role="alert"></div>
                            </div> -->
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'LoginReg', data() {
        return {
            username:'', //注册时的 邮箱
            password:'', //注册时的 密码
            code:'',  //注册时的 验证码
            loginuser:'',
            loginpasswd:'',
            is_register:false, //判断是否能够注册，只有验证码输入正确时才可以注册
            is_unregister:true, //校验失败为true，成功为false
            message:'', //操作错误时 表单的提示信息,
            login_message:'',
            mes:'发送验证码',
        }
    },
    methods: {
        // ***点击注册时调用的函数
        register(){
            // 判断是否都输入内容
            if(!this.username || !this.password){
                this.message="请输入信息"
                return;
            }
            // // 如果验证码没通过时返回
            // if(!this.is_register){
            //     this.message="验证码输入错误"
            //     this.mes = '发送验证码'
            //     return;
            // }
            // let定义一个变量 new新建一个FormData对象实例化给form_data变量
            let form_data = new FormData()
            // 向实例化的form_data添加数据  FormData是表单型
            form_data.append('username',this.username)
            form_data.append('password',this.password)
            form_data.append('code',this.code)
            // 发送axios请求服务器
            axios({
                url:'http://127.0.0.1:8000/lou/register',
                method:'post',
                data:form_data,
            }).then(res=>{
                if(res.data.code==200){
                    // 注册成功
                    alert('注册成功,请登录')
                    this.mes = '发送验证码'
                }else{
                    this.message = res.data.msg
                }
            })
        },
        //*** 发送邮箱（验证码）调用的函数
        send_verify_email(){
            // 叹号取反，判断如果用户没有输入邮箱，直接返回 ，什么都不干
            if(!this.username){
                this.message = '请输入邮箱后发送验证码'
                return;
            }
            let re_email = this.username.match('[a-zA-Z0-9.-]+[@][a-zA-Z0-9]+([.][a-zA-Z]){1,2}')
            if(!re_email){
                this.message = '邮箱格式不正确'
                return;
            }
            // 输入了邮箱的话，获取邮箱，发送axios请求给对应接口
            let form_data = new FormData()
            form_data.append('username',this.username)
            axios({
                url:'http://127.0.0.1:8000/lou/louview',
                method:'post',
                data:form_data,
            }).then(res=>{
                if(res.data.code==200){
                    this.mes=res.data.message
                }
                else{
                    this.message=res.data.message
                }
            })
        },
        //*** 校验表单框中的验证码输入是否正确
        // verify_email_token(){
        //     let form_data = new FormData();
        //     form_data.append('code',this.code);
        //     form_data.append('username',this.username);
        //     axios({
        //         url:'http://127.0.0.1:8000/api/user/verify_token',
        //         method:'post',
        //         data:form_data,
        //     }).then(res=>{
        //         if(res.data.code==200){
        //             // 如果校验成功，改为true代表可以进行注册
        //             this.is_register=true;
        //             this.is_unregister=false;
        //             this.message = res.data.message
        //         }else{
        //             this.is_register=false;
        //             this.is_unregister=true;
        //             this.message = res.data.message
        //         }
        //     }).catch(res=>{
        //         alert(res);
        //     })
        // },
        //*** 登录
        login(){
            // 判断是否都输入
            if(!this.loginuser || !this.loginpasswd){
                this.login_message = '请输入信息'
                return;
            }
            // 正则匹配邮箱判断格式是否正确
            let re_email = this.loginuser.match('[a-zA-Z0-9.-]+[@][a-zA-Z0-9]+([.][a-zA-Z]){1,2}')
            if(!re_email){
                this.login_message = '邮箱格式不正确'
                return;
            }
            // 封装表单数据
            let form_data = new FormData()
            form_data.append('username',this.loginuser)
            form_data.append('password',this.loginpasswd)
            // 发起axios请求
            this.axios.post('lou/login',form_data).then(res=>{
                // 登录成功
                if(res.data.code==200){
                    // 取出token
                    let token = res.data.token
                    // 存入session
                    window.sessionStorage.setItem('token',token)
                    // 跳转到全部课程
                    this.$router.push({
                        name:'Course'
                    })

                }else{
                    this.login_message = res.data.msg
                }
            }).catch(res=>{
                console.log(res.data)
            })

        }
    },
}
</script>

<style>

</style>
